<template>
  <el-container>
    <el-header>
      <slot name="header">Header</slot>
    </el-header>
    <el-main>
      <slot>Main</slot>
    </el-main>
    <el-footer>{{ logo.copyright }}</el-footer>
  </el-container>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      logo: (state) => state.user.logo,
    }),
  },
  mounted() {},
}
</script>
<style lang="scss">
.el-container {
  height: 100%;
}
.el-header {
  color: #333;
  text-align: center;
  height: 50px !important;
  padding: 0;
}

.el-aside {
  background-color: #fcfeff;
  color: #333;
  text-align: center;
  line-height: 200px;
  width: 210px !important;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  padding: 0;
}
.pagination {
  width: 100%;
  height: 30px;
  margin-top: 15px;
  text-align: center;
  border-radius: 8px;
  .el-pagination button {
    background: none;
  }
  .el-pager li {
    background: none;
  }
}
// .main {
// 	width: 100%;
// 	height: 100%;
// 	overflow: auto;
// }
.el-form-item__label {
  font-weight: 800;
}
.el-button--text,
.el-button--text.hover,
.el-button--text:focus,
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label,
.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path,
.el-select-dropdown__item.selected {
  color: #17c289;
}

.el-button--success,
.el-button--primary {
  background-color: #17c289;
  border-color: #17c289;
  border-radius: 4px;
}
.el-button--success:focus,
.el-button--success:hover,
.el-button--primary:hover,
.el-button--primary:focus,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: #17c289;
  border-color: #17c289;
  opacity: 0.8;
}
.el-checkbox__input.is-focus .el-checkbox__inner,
.el-checkbox__inner:hover,
.el-checkbox.is-bordered.is-checked,
.el-cascader .el-input .el-input__inner:focus,
.el-cascader .el-input.is-focus .el-input__inner,
.el-select .el-input.is-focus .el-input__inner,
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #17c289;
}
.el-footer {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: #909399;
  padding-top: 20px;
}
.el-textarea .el-input__count {
  background: none;
}
.el-loading-spinner .path {
  stroke: #17c289;
}
</style>
